<!-- 单位管理 -->
<template>
  <div class="app-container">
    <div class="main-info-container">
      <!-- 查询和其他操作 -->
      <div class="filter-container">
        <el-form ref="listQuery" :inline="true" :model="listQuery" class="form-bottom-line" label-width="80px">
          <el-form-item label="单位名称:">
            <el-input v-model="listQuery.name" clearable placeholder="请输入单位名称" autocomplete="off"/>
            <!-- <el-select v-model="listQuery.corp_id" clearable class="filter-item" placeholder="请选择单位名称">
              <el-option v-for="item in companyList" :key="item.corp_id" :label="item.name" :value="item.corp_id" />
            </el-select> -->
          </el-form-item>
          <el-form-item label="商务经理:">
            <el-select v-model="listQuery.business_manager" clearable class="filter-item" placeholder="请选择商务经理">
              <el-option v-for="item in salesmanList" :key="item.uuid" :label="item.nickname" :value="item.uuid" />
            </el-select>
          </el-form-item>
          <el-form-item label="单位类型:">
            <el-select v-model="listQuery.type" clearable class="filter-item" placeholder="请选择单位类型">
              <el-option v-for="(key, value) in companyType" :key="key" :label="key" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-permission="['v1/corps/index']" size="small" type="primary" icon="el-icon-search" @click="handleFilter" >查询</el-button>
            <el-button v-permission="['v1/corps/create']" type="primary" size="small" icon="el-icon-plus" @click.native="handleAdd">添加单位</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 查询结果 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        row-key="id"
        max-height="362"
        size="small"
        element-loading-text="正在查询中。。。"
        stripe
        border
        el-table-column
        fit
        highlight-current-row>
        <el-table-column align="center" label="单位名称" show-overflow-tooltip prop="name">
          <template slot-scope="scope"><span v-if="checkPermission(['v1/corps/update'])" class="hink" @click="handleEdit(scope.row)">{{ scope.row.name }}</span><span v-else>{{ scope.row.name }}</span></template>
        </el-table-column>
        <el-table-column align="center" label="单位类型" show-overflow-tooltip prop="type">
          <template slot-scope="scope">{{ companyType[scope.row.type] }}</template>
        </el-table-column>
        <el-table-column align="center" label="详细地址" show-overflow-tooltip prop="address" />
        <el-table-column align="center" label="联系人" show-overflow-tooltip width="90" prop="link_user" />
        <el-table-column align="center" label="联系人电话" show-overflow-tooltip width="90" prop="link_user_mobile">
          <template slot-scope="scope">{{ scope.row.link_user_mobile.substr(0, 3) + '****' + scope.row.link_user_mobile.substr(7) }}</template>
        </el-table-column>
        <el-table-column align="center" label="商务经理" show-overflow-tooltip prop="business_manager">
          <template slot-scope="scope">{{ salesmanTableList[scope.row.business_manager] }}</template>
        </el-table-column>
        <el-table-column align="center" label="合同日期" show-overflow-tooltip width="90" prop="created_at">
          <template slot-scope="scope">{{ scope.row.created_at, '{y}-{m}-{d}' | parseTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <div class="operation">
              <el-switch v-permission="['v1/corps/enable']" v-model="scope.row.is_forbidden" active-text="启用" inactive-text="禁用" active-color="#109008" inactive-color="#f2473f" @click.native.prevent="iconQiyong(scope.$index, scope.row)"/>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
      <formCompany
        :dialog-form="dialogForm"
        :dialog-type="dialogType"
        :dialog-visible.sync="dialogVisible"
        @getCancel="handleCancel"
        @closeBindWarnStandard="handleCloseBindWarnStandard"
        @submitForm="submitForm"/>
    </div>
  </div>
</template>
<script>
import { companyList, getSocialUnit, companyEnable } from '@/api/company'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import formCompany from './components/formCompany.vue'
import checkPermission from '@/utils/permission' // 权限判断函数
import { salesmanList } from '@/api/common'

export default {
  name: 'Order',
  components: {
    Pagination,
    formCompany
  },
  data() {
    return {
      companyList: [],
      // 新增修改弹窗信息
      dialogForm: {
        name: '', // 单位名称
        abbreviation: '', // 单位简称
        link_user: '', // 联系人
        link_user_mobile: '', // 联系电话
        business_manager: '', // 商务经理
        type: '', // 单位类型
        logo: '', // logo
        regulator: '', // 监管方
        province: '', // 省
        city: '', // 市
        district: '', // 区
        address: '' // 详细地址
      },
      dialogType: '添加',
      dialogVisible: false,
      formLoading: false,
      // 表格信息
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        offset: 8,
        business_manager: '',
        corp_id: ''
      },
      companyType: this.GLOBAL.companyType,
      // 商务经理下拉框
      salesmanList: [],
      // 回显商务经理列
      salesmanTableList: {}
    }
  },
  created() {
    this.getList()
    this.getCompanyList()
    this.getSalesmanList()
  },
  methods: {
    // 列表查询
    checkPermission,
    getList() {
      this.listLoading = true
      const that = this
      console.log(JSON.stringify(this.listQuery))
      companyList(this.listQuery)
        .then(response => {
          const data = response.data
          if (data.code === 40000) {
            that.list = []
            response.data.data.data.forEach(function(value, index, array) {
              array[index].is_forbidden = array[index].is_forbidden === 2
              that.list.push(array[index])
            })
            that.total = parseInt(response.data.data.total_count)
          } else {
            that.$message.warning(response.data.data)
          }
          this.listLoading = false
        })
        .catch(() => {
          this.total = 0
          this.listLoading = false
        })
    },
    // 单位下拉框查询
    getCompanyList() {
      const that = this
      getSocialUnit()
        .then(response => {
          if (response.data.code === 40000) {
            that.companyList = []
            if (that.companyList && response.data.data.length > 0) {
              that.companyList = response.data.data
            }
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch(() => {
          that.companyList = []
        })
    },
    // 查询
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    // 启用
    iconQiyong(index, data) {
      const that = this
      var flag = data.is_forbidden ? '启用' : '禁用'
      this.$confirm('此操作将' + flag + '该行数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        var params = {
          corp_id: data.corp_id
        }
        companyEnable(params)
          .then((res) => {
            const data = res.data
            if (data.code === 40000) {
              that.getList()
              that.$message.success(data.message)
            } else {
              that.$message.warning(data.message)
            }
          })
          .catch(() => {
            that.getList()
          })
      }).catch(() => {
        that.getList()
      })
    },
    // 添加单位
    handleAdd() {
      this.dialogVisible = true
      this.dialogType = '添加'
      this.dialogForm = {
        name: '',
        abbreviation: '',
        link_user: '',
        link_user_mobile: '',
        business_manager: '',
        type: '',
        logo: '',
        regulator: '',
        province: '',
        city: '',
        district: '',
        address: ''
      }
    },
    // 修改单位
    handleEdit(data) {
      this.dialogVisible = true
      this.dialogType = '修改'
      this.dialogForm = JSON.parse(JSON.stringify(data))
      console.log(JSON.stringify(this.dialogForm))
      this.dialogForm.logo = this.dialogForm.logo ? this.dialogForm.logo : ''
      this.dialogForm.type = this.dialogForm.type + ''
      this.dialogForm.regulator = this.dialogForm.regulator && this.dialogForm.regulator !== 'null' ? this.dialogForm.regulator : ''
      this.dialogForm.business_manager = this.dialogForm.business_manager && this.dialogForm.business_manager !== 'null' ? this.dialogForm.business_manager : ''
      this.dialogForm.selectedOptions = []
      this.dialogForm.selectedOptions.push(this.dialogForm.province + '')
      this.dialogForm.selectedOptions.push(this.dialogForm.city + '')
      this.dialogForm.selectedOptions.push(this.dialogForm.district + '')
    },
    // 新增弹窗确认
    submitForm(formName) {
      this.dialogVisible = false
      this.handleFilter()
    },
    handleCancel() {
      this.dialogVisible = false
    },
    // 关闭弹窗
    handleCloseBindWarnStandard() {
      this.dialogVisible = false
    },
    setTimeoutFn() {
      const that = this
      this.listLoading = true
      setTimeout(function() {
        that.listLoading = false
      }, 1000)
    },
    // 获取商务经理
    getSalesmanList() {
      const that = this
      salesmanList()
        .then((response) => {
          if (response.data.code === 40000) {
            that.salesmanList = []
            that.salesmanList = response.data.data
            that.salesmanTableList = {}
            that.salesmanList.forEach((item, index) => {
              that.salesmanTableList[item.uuid] = item.nickname
            })
            if (that.salesmanList && that.salesmanList.length > 0) {
              that.uuid = that.salesmanList[0].uuid
              that.nickname = that.salesmanList[0].nickname
            }
          } else {
            that.$message.warning(response.data.message)
          }
        })
        .catch((err) => {
          console.log(err)
          that.formLoading = false
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
